<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:ez="http://java.sun.com/jsf/composite/ezcomp" >
    <!--
    Author Lu Xiaodi
    -->
    <h:head> 
        <title>IOTR</title> 
        <style type="text/css"> 
            .gritter-notice-wrapper { 
                left:200px; 
                top:50px; 
            } 
        </style> 

        <script type="text/javascript">
        var piechartStyle = {
        padding:20,
        legend: {
            display:"right"
            ,spacing:4
            }
        };
        
        </script>
    </h:head> 
    <h:body>                 
        <ez:RepHeaderMenu/>
        <h1>TTA - Representative Manager Portal</h1> 

        <p:layout style="table-layout:auto; height:700px ">
            <p:layoutUnit position="left" header="Navigation" width="300">
                <ez:RepTTALeftMenu/>
            </p:layoutUnit>
            <p:layoutUnit position="center" header="Settings" scrollable="true">

                <p:panel id="salesByAge" style="border-style: ridge; text-align: center; 
                         text-decoration: underline; color: white" 
                         header="Sales By Age Group" > 
                    <h:form>
                        <h:panelGrid columns="3">
                            <h:outputText value="Select chart type:"/>
                            <h:selectOneMenu value="#{mdsStakeholderMB.salesByAgeChart}"> 
                                <f:selectItem itemLabel="Pie Chart" itemValue="1"/>
                                <f:selectItem itemLabel="Bar Chart" itemValue="2"/>
                                <f:selectItem itemLabel="Column Chart" itemValue="3"/>
                                <p:ajax update="salesByAgeForm"   
                                        listener="#{mdsStakeholderMB.chartTypeUpdate()}" />
                            </h:selectOneMenu>
                        </h:panelGrid>
                    </h:form>
                    <h:form id="salesByAgeForm">
                        <c:if test="${mdsStakeholderMB.salesByAgeChart == 1}">
                            <br/>
                            <p:pieChart 
                                model="#{mdsStakeholderMB.salesByAgeModel}"
                                style="piechartStyle" width="65%" height="65%"/>
                        </c:if>
                        <c:if test="${mdsStakeholderMB.salesByAgeChart == 2}">
                            <br/>
                            <p:barChart model="#{mdsStakeholderMB.salesByAgeCartesian}"
                                        style="piechartStyle" width="65%" height="65%"/>
                        </c:if>
                        <c:if test="${mdsStakeholderMB.salesByAgeChart == 3}"> 
                            <br/>
                            <p:columnChart model="#{mdsStakeholderMB.salesByAgeCartesian}"
                                           style="piechartStyle" width="65%" height="65%"/>
                        </c:if>
                    </h:form>
                </p:panel>
            </p:layoutUnit>
        </p:layout>

    </h:body> 
</html>